<template>
    <div class="box">
        <span class="text" :style="{ color: props.color, fontSize: props.size }">
            <slot>{{ props.text }}</slot>
        </span>
    </div>
</template>

<script setup lang="ts">
import type { ThemeType, SizeType } from "../type/index";

interface PropsType { 
    text: string;
    type?: ThemeType;
    size?: SizeType;
    width?: number | string; 
    height?: number | string;
    color?: string;
}

const props = withDefaults(defineProps<PropsType>(), {
    text: "这是文本片段",
    type: "primary" as ThemeType,
    size: "default" as SizeType,
    width: "100%",
    height: "100%",
    color: "#000"
});

// 点击处理函数
const handleClick = () => {
    console.log('文本被点击');
};
</script>

<style scoped lang="scss">
</style>